<template>
  <div class="reservation_page">
    <Menus :title="name" />
    <div v-if="!show_result">
      <div class="info">
        <i class="glyphicon glyphicon-info-sign"></i> 请填写下面申请选项，申请人保证以上本人填写的情况及提供的资料是真实的。</div>
      <div class="reservation_content">
        <div class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">预约时间</label>
            <div class="col-sm-10">
              <input type="date" class="form-control input-lg" v-model="booking.booking_time" placeholder="">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">申请人姓名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control input-lg" v-model="booking.username" placeholder="请填写需要法律援助者姓名">
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">身份证号码</label>
            <div class="col-sm-10">
              <input type="text" v-model="booking.id_no" class="form-control input-lg" placeholder="请填写需要法律援助者身份证号码">
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">居住地</label>
            <div class="col-sm-10">
              <select v-model="booking.residence" class="form-control input-lg">
                <option disabled value="">请选择</option>
                <option :value="key" v-for="(item,key) in residence" :key="'key-residence-'+key">{{item}}</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">手机号码</label>
            <div class="col-sm-10">
              <div class="tel-group">
                <input type="tel" class="form-control input-lg" v-model="booking.phone_number">
                <button type="button" @click="sendVerifyCode" class="btn btn-lg" :disabled="wait!=60" :class="wait==60 ? 'btn-primary' :'btn-default'">{{wait==60 ? '获取手机验证码' : wait+'秒后重试'}}</button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">手机验证码</label>
            <div class="col-sm-10">
              <input type="text" v-model="booking.verifycode" class="form-control input-lg" placeholder="">
            </div>
          </div>

        </div>
      </div>
      <div class="sub-btn">
        <a @click="updateForm" class="lp-btn large primary">申请预约</a>
      </div>
    </div>
    <div v-else class="result-content">
      <i class="material-icons" :class="{err:result}">{{result?'cancel':'check_circle'}}</i>
      <p v-if="!result">您的预约信息已经提交，请耐心等待结果</p>
      <p v-else>您已经预约成功，如果您想更改预约时间或地点，点击下面按钮取消此次预约，可以再次申请预约！<br>
        <a href="javascript:void(0)" class="btn btn-primary btn-lg" @click="dialog.show=true">取消预约</a>
      </p>
    </div>

    <Alert v-if="alert.show" :info="alert.info" :recall="alert.recall" @setClose="value=>alert.show=value" />
    <Dialogs v-model="dialog">
      <template slot="foot">
        <a class="lp-btn large primary" href="javascript:void(0)" @click="cancelReservation">确定取消</a>
        <a class="lp-btn large default" @click="dialog.show=false">不用取消</a>
      </template>

    </Dialogs>
  </div>
</template>
<style lang="scss" scoped>
.reservation_page {
  padding-top: 160px;
  .result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    font-size: 24px;
    color: #555;
    i {
      font-size: 128px;
      margin-bottom: 20px;
      color: #5cb85c;
      &.err {
        color: #d9534f;
      }
    }
    p {
      text-align: center;
      width: 800px;
      a {
        margin-top: 20px;
      }
    }
  }
  .info {
    margin: 80px auto 20px;
    width: 1000px;
    font-size: 18px;
    color: #808080;
    i {
      color: #e67e22;
    }
  }
  .reservation_content {
    width: 1000px;
    margin: 0 auto 35px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 60px 60px 40px;
    .header {
      border-bottom: 1px solid #ddd;
      margin-bottom: 40px;
      padding-bottom: 20px;
    }
    .form-group {
      margin-bottom: 35px;
    }
    .control-label {
      font-size: 20px;
      font-weight: normal;
    }
    .tel-group {
      display: flex;
      .btn {
        margin-left: 10px;
      }
    }
  }
  .sub-btn {
    width: 1000px;
    margin: 0 auto;
    .lp-btn {
      width: 100%;
    }
  }
}
</style>

<script>
import { checkReservation, checkMobile, checkSMS, isCardNo } from '@/fun'
import { residence } from '@/config'
import Menus from '../components/Menu'
import Alert from '@/components/Alert'
import Dialogs from '@/components/Dialog'
export default {
  components: {
    Menus,
    Alert,
    Dialogs
  },
  data() {
    return {
      residence, // 地区初始化选项
      name: '在线预约', // 页面标题
      wait: 60, // 验证码等待时间
      show_result: false, // 是否显示申请结果
      result: 1,
      alert: {
        // 提示内容
        show: false,
        info: '',
        recall: () => {}
      },
      dialog: {
        show: false,
        title: '是否确定取消预约此次预约'
      },
      booking: {
        // 表单选项
        booking_type: 1,
        booking_time: '',
        username: '',
        user_type: 0,
        id_no: '',
        address: '',
        phone_number: '',
        residence: '',
        server_type: 0,
        verifycode: '',
        no: ''
      }
    }
  },
  methods: {
    // 取消预约
    async cancelReservation() {
      const res = await this.$get(
        `/pufa/km/booking/cancel/?mobile_number=${this.booking
          .phone_number}&no=${localStorage.code}`,
        this
      )
      if (res.errcode) {
        this.alert.show = true
        this.alert.info = '非法操作'
        return
      }
      this.alert.show = true
      this.alert.info = '预约取消成功！'
      this.alert.recall = () => {
        this.show_result = false
        this.booking.verifycode = ''
        this.dialog.show = false
      }
    },
    updateForm() {
      const ver_booking = checkReservation(this.booking)
      const ver_sms = checkSMS(this.booking.verifycode)
      const ver_id = isCardNo(this.booking.id_no)
      if (!ver_booking[0]) {
        this.alert.show = true
        this.alert.info = ver_booking[1]
        return
      }
      // 身份证号码
      if (!ver_id[0]) {
        this.alert.show = true
        this.alert.info = ver_id[1]
        return
      }
      // 验证码错误
      if (!ver_sms[0]) {
        this.alert.show = true
        this.alert.info = ver_sms[1]
        return
      }
      this.booking.no = localStorage.code
      if (!this.booking.no) return
      this.$request
        .get('/pufa/booking/', { params: this.booking })
        .then(res => {
          console.log(res)
          // if (res.data.errcode) {
          //   this.alert.show = true
          //   this.alert.info = res.data.errmsg
          //   return
          // }
          this.result = res.data.errcode
          this.show_result = true
          // alert('成功')
          // this.$router.reloadPage('/yuanzhu/reservation_finish')
        })
        .catch(err => console.log(err))
    },
    async sendVerifyCode() {
      const ver_mobile = checkMobile(this.booking.phone_number)
      if (this.wait !== 60) return
      // 手机号码错误
      if (!ver_mobile[0]) {
        this.alert.show = true
        this.alert.info = ver_mobile[1]
        return
      }
      const { status, msg } = await this.$get(
        `/pufa/send/terminal/verify_code/?mobile_number=${this.booking
          .phone_number}&no=${localStorage.code}`
      )

      if (status <= 0) {
        // alert(errmsg)
        this.alert.show = true
        this.alert.info = msg
        this.wait = 60
        return
      }
      this.time()
    },
    time() {
      if (this.wait === 0) {
        this.wait = 60
      } else {
        this.wait--
        setTimeout(() => this.time(), 1000)
      }
    }
  },
  created() {}
}
</script>